import React, { Component } from 'react';
import { Modal, Form, Input } from 'antd';

class AppDialog extends Component {
  formRef = React.createRef();

  onOk = async () => {
    try {
      let values = await this.formRef.current.validateFields();
      if (this.props.onOk) {
        this.props.onOk(values);
      }
    } catch (e) {
      console.log('校验没有通过。');
    }
  };

  onCancel = () => {
    if (this.props.onCancel) {
      this.props.onCancel();
    }
  };

  render() {
    const { params } = this.props;

    const layout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    };

    return (<Modal title={params.title ? params.title : '新增应用'} width={520}
                   destroyOnClose={true}
                   visible={params.visible}
                   confirmLoading={params.loading}
                   onOk={this.onOk}
                   onCancel={this.onCancel}>
      <Form {...layout} ref={this.formRef} initialValues={params.editData}>
        <Form.Item name='id' noStyle={true}>
          <Input type="hidden"/>
        </Form.Item>
        <Form.Item label="应用名称" name='name' rules={[{ required: true, message: '请输入应用名称' }]}>
          <Input autoComplete="off"/>
        </Form.Item>
        <Form.Item label="前缀路径" name='prefixUrl'>
          <Input autoComplete="off"/>
        </Form.Item>
        <Form.Item label="应用描述" name='remark'>
          <Input.TextArea/>
        </Form.Item>
      </Form>
    </Modal>);
  }
}

export default AppDialog;
